import React, { useState } from 'react';
import { Layout, theme } from 'antd';
import { Outlet } from 'react-router-dom';

import MainMenu from '@/components/MainMenu';

const { Header, Content, Footer, Sider } = Layout;



const Home: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    // const navigateTo = useNavigate()

    return (
        <Layout style={{ minHeight: '100vh' }}>
            {/* 左侧导航栏 */}
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="demo-logo-vertical" />
                <MainMenu />
            </Sider>
            {/* 右侧内容 */}
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    <div style={{ paddingLeft: '10px' }}>Header</div>
                </Header>
                <Content style={{
                    margin: '16px 16px 0', 
                    paddingLeft: 24,
                    background: colorBgContainer,
                    borderRadius: borderRadiusLG,
                }}>
                    <Outlet />
                </Content>
                <Footer style={{ textAlign: 'center', padding: 0, lineHeight: '48px' }}>
                    Ant Design ©{new Date().getFullYear()} System
                </Footer>
            </Layout>
        </Layout>
    );
};

export default Home;